<!DOCTYPE html>  
<html>  
<head>  
  <title>交互式聊天</title>  
  <style>  
    #chat-container {  
      width: 400px;  
      height: 600px;  
      border: 1px solid #ccc;  
      padding: 20px;  
      margin: 0 auto;  
    }  
    #chat-messages {  
      height: 500px;  
      overflow-y: scroll;  
      padding: 10px;  
      border: 1px solid #ccc;  
      margin-bottom: 10px;  
    }  
    #chat-input {  
      padding: 10px;  
    }  
    #message-input {  
      width: 100%;  
      padding: 5px;  
      margin-bottom: 10px;  
    }  
    #send-button {  
      padding: 5px 10px;  
    }  
  </style>  
</head>  
<body>  
  <div id="chat-container">  
    <div id="chat-messages"></div>  
    <div id="chat-input">  
      <input type="text" id="message-input" placeholder="输入消息...">  
      <button id="send-button">发送</button>  
    </div>  
  </div>  
  
  <script>  
    // 获取聊天消息显示区域和输入区域元素  
    const chatMessages = document.getElementById('chat-messages');  
    const messageInput = document.getElementById('message-input');  
    const sendButton = document.getElementById('send-button');  
  
    // 监听发送按钮的点击事件  
    sendButton.addEventListener('click', () => {  
      // 获取用户输入的消息  
      const message = messageInput.value;  
      if (message) {  
        // 添加消息到聊天消息显示区域  
        chatMessages.innerHTML += `<p>${message}</p>`;  
        // 将滚动条滚动到最底部  
        chatMessages.scrollTop = chatMessages.scrollHeight;  
        // 清空输入框中的内容  
        messageInput.value = '';  
      }  
    });  
  </script>  
</body>  
</html>